<template>
  <div class="container1">
    <div class="container2">
      <div class="card">
        <div class="card-item gap-col-10">
          <div v-if="showRevDtl" @click="onPage" class="revDtl-btn pointer">
            <div class="font-size-12 gap-row-5 line-height-140 font-weight-500 arrow pe-1">{{ $t('info.revDtl') }}</div>
          </div>
          <div class="light"></div>
          <div class="content gap-col-6">
            <div class="text-white font-size-12 font-style-normal font-weight-500 line-height-120">
              {{ $t('info.income') }}
            </div>
            <div class="text-white font-size-26 font-style-normal font-weight-500 line-height-140">$ {{ amount }}</div>
          </div>
          <Icon class="icon" size="75" name="bgMoney"></Icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { $t } from '@/i18n'

const props = defineProps({
  amount: {
    type: Number,
    default: 999999999,
  },
  showRevDtl: {
    type: Boolean,
    default: false,
  },
})

const emits = defineEmits(['onPage'])

function onPage() {
  emits('onPage')
}

const amount = computed(() => {
  const split = props.amount.toString().split('.')
  // 处理小数部分，确保只有两位
  const decimal = split[1] ? `.${split[1].slice(0, 2).padEnd(2, '0')}` : '.00'
  return (
    split[0]
      .toString()
      .replace(/[^\d-]/g, '')
      .replace(/\B(?=(\d{3})+(?!\d))/g, ',') + decimal
  )
})
</script>
<style scoped lang="scss">
.container1 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;

  .container2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .card {
      display: flex;
      width: 21.4375rem;
      height: 5.5rem;
      flex-direction: column;
      align-items: flex-start;

      .card-item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 0 0;
        align-self: stretch;
        position: relative;

        border-radius: 0.625rem;
        box-shadow: inset 1.5px 1.504009771347046px 2.204009771347046px 0px rgba(255, 255, 255, 0.15),
          inset -1.102004885673523px -1.102004885673523px 2.204009771347046px 0px rgba(0, 0, 0, 0.04);

        .content {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;

          position: absolute;
          left: 1rem;
          top: 1rem;
        }

        .icon {
          position: absolute;
          right: 0rem;
          bottom: 0rem;
          filter: drop-shadow(4px 1px 1px rgba(6, 13, 29, 1));
          z-index: 9;
        }

        .light {
          position: absolute;
          width: 21.4375rem;
          height: 5.5rem;

          opacity: 0.5;
          background: linear-gradient(137deg, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0) 100%);
          border-radius: 0.625rem;
          mix-blend-mode: overlay;
          z-index: 10;
        }
      }
    }
  }
}

.revDtl-btn {
  position: absolute;
  padding: 5px 15px 5px 10px;
  border-radius: 15px 0px 0px 15px;
  right: 0;
  margin-top: 1rem;
  z-index: 11;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: var(--color-primary-divider, rgba(215, 215, 215, 0.4));
  & .arrow::before {
    position: absolute;
    width: 10px;
    height: 10px;
    font-weight: 500;
    right: 0;
    transform: translate(-50%, 5%);
    content: url(@/assets/icons/svg/mine/arrow-right.svg);
  }
}

.desktop {
  .container1 .container2 .card {
    width: 20.4375rem;
  }
}
</style>
